<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">图片库管理</a></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片组件 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-search"></i>
        <span>筛选查询</span>
      </div>
      <!-- 查询表单开始 -->
      <el-form :inline="true" :model="searchMap" class="demo-form-inline" size="small">
        <el-form-item label="编号">
          <el-input v-model="searchMap.id" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="searchMap.title" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="onSubmit">搜索</el-button>
          <el-button type="info" @click="addAlbum()">新建相册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询表单结束 -->
    <!-- 表格开始 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="title" label="相册名称" width="280"></el-table-column>
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img slot="" :src="scope.row.image"  style="height:50px;"/>
        </template>
      </el-table-column>
      <el-table-column prop="goodsNum" label="排序" width="sort"></el-table-column>
      <el-table-column prop="goodsNum" label="描述" width="desc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-button size="mini">查看</el-button>
           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteAlbum(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->

     <!-- 分页开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 分页结束 -->

    <!--新增或修改对话框-->
    <!-- <el-dialog :title="albumForm.id==null?'新增':'编辑'" :visible.sync="dialogFormVisible" @close="dialogClose">
      <el-form :model="albumForm">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="albumForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类选项" :label-width="formLabelWidth">
          <el-input v-model="albumForm.options" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="模板ID" :label-width="formLabelWidth">
          <el-input v-model="albumForm.templateId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; albumForm={}">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>



<script>
export default {
  data () {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 页大小
      pageSizeList: [10, 20, 50, 100, 500], // 页大小列表
      total: 0, // 总记录数
      searchMap: {}, // 查询表单对象
      dialogFormVisible: false,
      // 添加表单
      albumForm: {},
      // 表单label的宽度
      formLabelWidth: '120px',
      parentIds: []
    }
  },

  methods: {
    // 初始化
    async getAlbumList () {
      const { data: res } = await this.$http.post(`/goods/album/findPage?page=${this.currentPage}&size=${this.pageSize}`, this.searchMap)
      this.tableData = res.rows
      this.total = res.total
    },
    //查询
    onSubmit () {
      this.getAlbumList()
    },
    // 编辑
    async handleEdit (index, row) {
      const { data: res } = await this.$http.get(`/goods/album/findById?id=${row.id}`)
      this.dialogFormVisible = true
      this.albumForm = res
    },
    // 删除
    async deleteAlbum ( row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
          const { data: res } = await this.$http.delete(`/goods/album/delete/${row.id}`)
          if (res.code !== 200) {
            this.$message.error('删除失败')
          }
          this.$message.success('删除成功')
          this.getAlbumList()
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 页大小改变
    handleSizeChange (val) {
      this.pageSize = val
      this.getAlbumList()
    },
    // 当前页改变
    handleCurrentChange (val) {
      this.currentPage = val
      this.getAlbumList()
    },
    // 添加
    async add () {
        // 发请求
        const { data: res } = await this.$http.post(`/goods/album/${this.albumForm.id == null ? 'add' : 'update'}`, this.albumForm)
        this.$message({
              type: res.code === 200 ? 'success' : 'error',
              message: res.message
        })
        this.dialogFormVisible = false
        this.getAlbumList()
    },
    // 对话框关闭
    dialogClose () {
      this.albumForm = {}
    },
    // 添加相册
    addAlbum () {
      this.$router.push('/goods/addAlbum')
    }
  },
  created () {
    this.getAlbumList()
  }
}
</script>

<style>

</style>